<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>script.aculo.us functional test</title>
  <script type="text/javascript" src="../../lib/prototype.js"></script>
  <script type="text/javascript" src="../../src/effects.js"></script>
  <script type="text/javascript" src="../../src/dragdrop.js"></script>
  <script type="text/javascript">
   //<![CDATA[
   var myStartEffect = function(element) {
     element._opacity = Element.getOpacity(element);
     new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
     new Effect.Highlight(element, {});
   }
   //]]>
  </script>
  <style type="text/css">
  /*<![CDATA[*/
   h1 {font-size: 1.2em; text-align:center;}
   li {
           margin: 5px auto;
           padding: 2px;
           width: 200px;
           text-align:center;
           list-style-type:none;
           border: 2px solid #779;
           background-color: #dde
   }
   div {
           margin: 5px auto;
           padding: 2px;
           width: 300px;
           text-align:center;
           border: 2px solid #797;
           background-color: #ded
   }
  /*]]>*/
  </style>
</head>

<body>
  <h1>No delay sortable</h1>

  <ul id="sort1">
    <li id="s1_1">one</li>

    <li id="s1_2">two</li>

    <li id="s1_3">three</li>
  </ul>

  <h1>Delayed sortable (500 ms)</h1>

  <ul id="sort2">
    <li id="s2_1">one</li>

    <li id="s2_2">two</li>

    <li id="s2_3">three</li>
  </ul>

  <h1>No delay draggable</h1>

  <div id="drag1">
    Lorem ipsum
  </div>

  <h1>Delayed draggable (1000 ms)</h1>

  <div id="drag2">
    Lorem ipsum
  </div>
  
  <script type="text/javascript" charset="utf-8">
    Sortable.create('sort1', {starteffect: myStartEffect});
    Sortable.create('sort2', {starteffect:myStartEffect, delay:500});
    new Draggable('drag1', {starteffect:myStartEffect});
    new Draggable('drag2', {starteffect:myStartEffect, delay:1000});
  </script>
</body>
</html>
